<template>
  <!-- 服务评价 -->
  <serviceEvaluation v-if="message.type === 'rate'" />
  <!-- 排队消息 -->
  <msg-line-up v-else-if="message.type === 'lineup'" :count="content" />
  <!-- 普通系统消息 -->
  <msg-ordinary v-else-if="message.type === 'ordinary'" :content="content" />
  <!-- 客服/会话状态消息 -->
  <msg-server-status v-else-if="message.type === 'server-status'" :content="content" />
  <!-- 微信公众/公司信息 -->
  <msg-wecat-info v-else-if="message.type === 'wecat-info'" :count="content" />
  <!-- 富文本消息 -->
  <msg-box-richtext v-else-if="message.type === 'text'" v-model:message="props.message" />
  <!-- 图片消息 -->
  <msg-box-img v-else-if="message.type === 'image'" v-model:message="props.message" />
  <!-- 视频消息 -->
  <msg-box-video v-else-if="message.type === 'video'" v-model:message="props.message" />
  <!-- 语音消息 -->
  <msg-box-voice v-else-if="message.type === 'voice'" v-model:message="props.message" />
</template>

<script setup lang="ts">

/** 消息类型 */
import serviceEvaluation from "./service-evaluation.vue";
import msgLineUp from "./msg-type/msg-line-up.vue";
import msgOrdinary from "./msg-type/msg-ordinary.vue";
import msgWecatInfo from "./msg-type/msg-wecat-info.vue";
import msgServerStatus from "./msg-type/msg-server-status.vue";
import msgBoxRichtext from "./msg-type/msg-box-richtext.vue";
import msgBoxImg from "./msg-type/msg-box-img.vue";
import msgBoxVideo from "./msg-type/msg-box-video.vue";
import msgBoxVoice from "./msg-type/msg-box-voice.vue";

import { computed } from "vue";

const props = defineProps({
  message: {
    type: Object,
    required: false,
    default: () => {},
  },
});

// 解析消息
const content = computed(() => {
  return props.message.content;
});
</script>
